<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>订单支付</title>
    <!-- Bootstrap -->
    <link href="../assets/css/mui.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/buffetmeal_content.css" rel="stylesheet" />
  </head>
  <style type="text/css">
   .order-title{
     margin-top: 10px;
     padding: 0 10px;
     background-color: #FFFFFF;
     height: 72px;
     font-size: 15px;
   }
   .order-xinxi{
     height: 36px;
     padding-top: 12px;
   }
   .vip-vipdengji{
     height: 36px;
     padding-top: 5px;
   }
   .order-content{
     margin-top: 10px;
     background-color: #FFFFFF;
     font-size: 15px;
   }
   .order-content-item{
     padding: 0 10px;
     height: 44px;
     line-height: 42px;
     border-top: 1px solid #F4F4F4;
   }
   .order-content-item:first-child{
     border-top: none;
   }
   .pay-jinejine{
     color: #FC5252;
   }
   .orderchuzhi-chose{
     display: inline-block;
     width: 16px;
     height: 16px;
     background: url(../assets/images/chose16.png) no-repeat;
   }
   .orderchuzhi-choseno{
     display: inline-block;
     width: 16px;
     height: 16px;
     background: url(../assets/images/chose-116.png) no-repeat;
   }
   .orderchuzhi-list{
     width: 100%;
     height: 132px;
     overflow: hidden;
   }
   .orderchuzhi-more{
     height: 26px;
     line-height: 26px;
     background-color: #FFFFFF;
     text-align: center;
   }
   .border-none{
     border: none;
   }
   .heightAuto{
     height: auto !important;
   }
   .hidden{
     display: none;
   }
  </style>

  <body>
    <header id="header" class="mui-bar mui-bar-nav">
      <h1 class="mui-title">订单支付</h1>
      <button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
      <span class="mui-icon mui-icon-left-nav"></span>返回</button>
      <a class="mui-pull-right headerright"><i class="icon iconfont icon-gengduo"></i></a>
    </header>
    <div class="mui-content">
      <div class="order-title">
        <div class="order-xinxi">
          <span class="mui-pull-left order-jine">订单金额</span>
          <span class="mui-pull-right total-priceprice">￥88</span>
        </div>
        <div class="vip-vipdengji">
          <span class="mui-pull-left vip-vipdj">会员LV4</span>
          <span class="mui-pull-right vip-jiane">-￥8</span>
        </div>
      </div>
      <div class="order-content">
        <div class="order-content-item order-youhui">
          <span class="mui-pull-left order-youhui-title">使用优惠券</span>
          <span class="mui-pull-right order-youhui-con">消费满200减20<i class="icon iconfont icon-xiangyou1 icon-size"></i></span>
        </div>
        <div class="order-content-item order-youhui">
          <span class="mui-pull-left chuzhie">储值额(可用余额：20元)</span>
          <span class="mui-pull-right pay-jinejine">￥88</span>
        </div>
        <div class="orderchuzhi-list">
          <div class="order-content-item order-youhui">
            <span class="orderchuzhi-radio orderchuzhi-chose"></span>
                                储值200送20
          </div>
          <div class="order-content-item order-youhui">
            <span class="orderchuzhi-radio orderchuzhi-choseno"></span>
                                储值200送20
          </div>
          <div class="order-content-item order-youhui">
            <span class="orderchuzhi-radio orderchuzhi-choseno"></span>
                                储值200送20
          </div>
          <div class="order-content-item order-youhui">
            <span class="orderchuzhi-radio orderchuzhi-choseno"></span>
                                储值200送20
          </div>
          <div class="order-content-item order-youhui">
            <span class="orderchuzhi-radio orderchuzhi-choseno"></span>
                                储值200送20
          </div>
        </div>
        <div class="orderchuzhi-more" onclick="show()">
          <i class="icon iconfont icon-xiangxia2 icon-size"></i>
          <i class="icon iconfont icon-xiangshang icon-size hidden"></i>
        </div>
      </div>
      <div style="height: 60px;"></div>
      <div class="yongcantotal-footer">
        <span class="mui-pull-left footer-total">
          <span class="totaltitle">共计</span>
        <span class="total-priceprice">￥88</span>
        </span>
        <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right pay-btn">立即支付</button>
      </div>
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/mui.js"></script>
    <script type="text/javascript">
        function show(){
          if($('.orderchuzhi-list').hasClass('heightAuto')){
            $('.orderchuzhi-list').removeClass('heightAuto')
            $('.icon-xiangshang').addClass('hidden')
            $('.icon-xiangxia2').removeClass('hidden')
          }else{
            $('.orderchuzhi-list').addClass('heightAuto')
            $('.icon-xiangshang').removeClass('hidden')
            $('.icon-xiangxia2').addClass('hidden')
          }
        }
        $('.orderchuzhi-radio').on('click',function(){
          if($(this).hasClass('orderchuzhi-chose')){
            $(this).removeClass('orderchuzhi-chose')
            $(this).addClass('orderchuzhi-choseno')
          }else{
            $(this).addClass('orderchuzhi-chose')
            $(this).removeClass('orderchuzhi-choseno')
            $(this).parent().siblings().children('.orderchuzhi-radio').removeClass('orderchuzhi-chose')
            $(this).parent().siblings().children('.orderchuzhi-radio').addClass('orderchuzhi-choseno')
          }
        })
    </script>
  </body>

</html>